<template>
  <div class="room-area">
    <!--1. 区域header-->
    <AreaHeader :title="areaData.title" :subtitle="areaData.subtitle"></AreaHeader>
    <!--2. 房间列表-->
    <div class="room-list">
      <template v-for="item in areaData.list" :key="item.id">
        <roomItem :itemData="item"></roomItem>
      </template>
    </div>
  </div>
</template>

<script setup>
  import AreaHeader from './AreaHeader.vue'
  import roomItem from './room-item.vue'

  defineProps({
    areaData: {
      type: Object,
      default: () => ({})
    }
  })
</script>

<style lang="less" scoped>
    .room-list {
      display: flex;
      flex-wrap: wrap;
      margin: 20px -8px;
    }
</style>